<template>
  <div>
    <el-container>
      <el-header style="height: 250px;">
        <el-card class="box-card" style="width: 100%;">
          <div slot="header" class="clearfix">
            <h3>基本信息</h3>
          </div>
          <div>
            <div style="margin-bottom:25px; float: left; width: 25%;">运输任务编号：{{ form.transportTaskId }}</div>
            <div style="margin-bottom:25px; float: left; width: 25%;">车牌号码：{{ form.licensePlate }}</div>
            <div style="margin-bottom:25px; float: left; width: 25%;">起始地机构：{{ form.startAgencyName }}</div>
            <div style="margin-bottom:25px; float: left; width: 25%;">目的地机构：{{ form.endAgencyName }}</div>
            <div style="margin-bottom:25px; float: left; width: 25%;">出车时间：{{ form.outStorageTime }}</div>
            <div style="margin-bottom:25px; float: left; width: 25%;">回车时间：{{ form.intoStorageTime }}</div>
            <div style="margin-bottom:25px; float: left; width: 25%;">司机：{{ form.driverName }}</div>
          </div>
        </el-card>
      </el-header>
      <el-main style="height: 200px;">
        <el-card class="box-card" style="width: 100%;">
          <div slot="header">
            <h3>异常信息</h3>
          </div>
          <div>
            <div style="margin-bottom:25px; float: left; width: 30%;">车辆故障：{{ form.isFault ? '是':'否' }}</div>
            <div style="margin-bottom:25px; float: left; width: 30%;">车辆违章：{{ form.isBreakRules ? '是':'否' }}</div>
            <div style="margin-bottom:25px; float: left; width: 30%;">车辆事故：{{ form.isAccident ? '是':'否' }}</div>
          </div>
        </el-card>
      </el-main>

    </el-container>
  </div>
</template>

<script>
import { carReturn } from '@/api/car'
export default {
  data() {
    return {
      form: {
        transportTaskId: '',
        licensePlate: '',
        startAgencyName: '',
        endAgencyName: '',
        outStorageTime: '',
        intoStorageTime: '',
        driverName: '',
        isFault: '',
        isBreakRules: '',
        isAccident: ''
      }
    }
  },
  created() {
    this.carReturn(this.$route.query.id)
  },
  methods: {
    goBack() {
      window.history.back()
    },
    async carReturn(id) {
      const res = await carReturn(id)
      this.form = res
    }
  }
}
</script>

<style>

 .el-header{
    background-color: #fff;
    color: #333;
    margin-top: 20px;
  }

  .el-main {
    background-color: #fff;
    color: #333;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

</style>
